<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>

<pre>
打电话：
1、手机
2、拨号
3、说
4、听


ajax:
1、创建ajax对象
2、链接到服务器
3、发送请求
4、接收返回值



        现实生活      js
同步：多件事一起  一件一件来
异步：一件一件来  多件事一起


ajax天生用来做异步

注意点：
1、网页是utf-8编码，读取的文件如果是其他的编码方式，会出现乱码的问题
所以所有的文件，html,js,读取的文件都必须是统一的编码

2、ajax请求的文件的缓存问题
加时间戳

3、get Vs. post
get: 放入url, ?key1=value1&key2=value2

get:   -- 用于获取数据
通过网址
容量小
安全性差
有缓存

post:  -- 用于上传数据
通过http Content
容量大（2G）
安全性好一点
没有缓存


</pre>

<input type="button" id="btn1" value="读取" />
<input type="button" id="btn2" value="读取" />
<p id="p1"></p>

<script>
// var a = 12;
// console.log(window.a);  //12
// console.log(a);         //12
// console.log(window.b);  //undefined
// console.log(b);         //Uncaught ReferenceError: b is not defined 
// 用一个没有定义的变量--报错
// 用一个没有定义的属性--undefined

window.onload = function(){

    var oBtn1 = document.getElementById("btn1");
    oBtn1.onclick = function(){
        // 1、创建ajax对象
        // 如果不写上window, 是没有定义的变量, IE6报错
        // 写上window，是没有定义的属性，IE6返回的是undefined
        if(window.XMLHttpRequest){
            // 非IE6
            var oAjax = new XMLHttpRequest(); 
        }
        else{ 
            // IE6
            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // alert(oAjax);
        // alert(oAjax.readyState);  //0


        // 2、链接到服务器
        // oAjax.open(方法, 文件名, 异步传输);
        oAjax.open('GET', 'test.html', true);
        // alert(oAjax.readyState);   //1


        // 3、发送请求
        oAjax.send();
        // alert(oAjax.readyState);   //1


        // 4、接收返回值
        // 每当 readyState 属性改变时，就会调用onreadystatechange函数
        oAjax.onreadystatechange = function(){
            // 浏览器和服务器，进行到哪一步了
            // readyState, 存有 XMLHttpRequest 的状态
            // 0: 未初始化--还没有调用open()方法
            // 1: 载入--已调用send(),正在发送请求
            // 2: 载入完成--send()完成
            // 3: 解析，正在解析相应内容
            // 4: 请求已完成，且响应已就绪
            // status
            // 200: "OK"
            // 404: 未找到页面

            if(oAjax.readyState == 4){ //读取完成（成功 or 失败）

                if(oAjax.status == 200){
                    alert("success"+oAjax.responseText);
                }
                else{
                    alert("fail")
                }
            }
        }

    }


    var oBtn2 = document.getElementById("btn2");
    oBtn2.onclick = function(){
        // 时间戳，阻止缓存
        ajax("a.txt?t=" + new Date().getTime(), function(data){
            var p1 = document.getElementById("p1");
            p1.innerHTML = data;
            p1.innerHTML = p1.innerHTML;

        }, function(status){
            alert(status);
        });
    }
}





// ajax函数非封装
function ajax(url, fnSucc, fnFail){
    if(window.XMLHttpRequest){// 非IE6
        var oAjax = new XMLHttpRequest(); 
    }
    else{ // IE6
        var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 2、链接到服务器
    oAjax.open('GET', url, true);

    // 3、发送请求
    oAjax.send();

    // 4、接收返回值
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState == 4){ //读取完成（成功 or 失败）
            if(oAjax.status == 200){
                fnSucc(oAjax.responseText);
            }
            else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    }
}


</script>
</body>
</html>